<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- <input type="button" value="这是一个按钮"> -->
    <!-- <input type="text" onkeyup="myOnkeyUp()"> -->

    <div>
        <span>Hello HTML</span>
        <span>Hello Vue</span>
    </div>

    <img src="../HTML/QQ_1744893509357.png" alt="">
</body>
<script>
    // //事件源
    // let button=document.querySelector('input')
    // //绑定事件类型(点击事件)
    // button.onclick=function(){ alert('Hello')}

    // let input=document.querySelector('input')
    // input.onkeydown=function (event)
    // {
    //     console.log("键盘正在按下")
    //     let a=event.keyCode;
    //     //console.log(a)  //显示按下的按键的ASCII码

    //     let b=String.fromCharCode(a)
    //     console.log(b)

    //     //对于几个特殊的按键
    //     if(event.shiftKey){
    //         alert("Shift被按下")
    //     }
    //     if(event.altKey)
    //     {
    //         alert("alt键被按下")
    //     }
    // }

    // function myOnkeyUp()
    // {
    //     console.log("按键被抬起")
    // }

    // let elem=document.querySelector('div')
    // //读取div内部内容
    // console.log(elem.innerText)
    // //修改div中内容
    // elem.innerText='Hello <span> Hello JS</span>'

    let elem=document.querySelector('div')
    console.log(elem.innerHTML)
    //修改
    elem.innerHTML="<h3>这是h3标签</h3>"

    let elem1=document.querySelector('img')
    console.dir(elem1)

    elem1.title="这是一个图片"
    elem1.onclick=function (){
        alert('你已经点击了这个图片')
    }
</script>
</html>